export default {
    data() {
        return {
            cart: {
                stateAll: false,
                cartList: [{
                        id: 1001, //商品序号
                        name: 'js高级编程', //商品名
                        url: 'https://img1.baidu.com/it/u=454394458,1998378568&fm=253&fmt=auto&app=138&f=JPEG', //商品图片
                        price: 68.90, //商品价格
                        num: 0, //商品数量
                        singlePrice: 0, //商品总价=数量*价格    
                        state: false //状态
                    },
                    {
                        id: 1002,
                        name: 'css高级编程',
                        url: 'https://img1.baidu.com/it/u=337910016,91561566&fm=26&fmt=auto',
                        price: 55.89,
                        num: 0,
                        singlePrice: 0,
                        state: false //状态
                    },
                    {
                        id: 1003,
                        name: 'html高级编程',
                        url: 'https://img1.baidu.com/it/u=337910016,91561566&fm=26&fmt=auto',
                        price: 45.89,
                        num: 0,
                        singlePrice: 0,
                        state: false //状态
                    }
                ]
            },
        }
    },
    watch: {
        setProduct() {
            let product = this.$store.getters.product
            this.onAddProduct(product)
        }
    },
    computed: {
        setProduct() {
            return this.$store.state.product
        },
        totalPrice() {
            let {
                cartList
            } = this.cart
            let total = cartList.reduce((s, item) => s += item.state ? Number(item.singlePrice) : 0, 0)
            return Number(total).toFixed(2)
        }
    },
    methods: {
        onAddProduct(product) {
            this.cart.cartList.push(product)
        },
        onDelete(id) {
            let {
                cartList
            } = this.cart
            let index = cartList.findIndex(item => item.id === id)
            cartList.splice(index, 1)
            this.cart.cartList = cartList
        },
        onCheckAll() {
            let {
                stateAll,
                cartList
            } = this.cart
            stateAll = !stateAll
            cartList.forEach(item => item.state = stateAll)
            this.cart = {
                stateAll,
                cartList
            }
        },
        onCheckSingle(id) {
            let {
                stateAll,
                cartList
            } = this.cart
            let product = cartList.find(item => item.id === id)
            product.state = !product.state
            stateAll = cartList.every(item => item.state)
            this.cart = {
                stateAll,
                cartList
            }
        }
    },
    template: `<div class="cart-list">
                <table>
                    <tr>
                        <th><input type="checkbox" name="checkall" :checked="cart.stateAll" @click="onCheckAll">全选框</th>
                        <th>序号</th>
                        <th>商品图片</th>
                        <th>商品信息</th>
                        <th>商价</th>
                        <th>数量</th>
                        <th width="100px">总价</th>
                        <th>操作</th>
                    </tr>
                    <tr v-for="item in cart.cartList">
                        <td><input type="checkbox" name="checksingle" :checked="item.state" @click="onCheckSingle(item.id)">
                        </td>
                        <td>{{item.id}}</td>
                        <td><img :src="item.url" alt=""></td>
                        <td>{{item.name}}</td>
                        <td>￥{{item.price}}</td>
                        <td><input type="button" name="minus" value="-" :disabled="item.num===0" @click="item.num--"><input
                                type="text" name="amount" :value="item.num"><input type="button" name="plus" value="+"
                                @click="item.num++"></td>
                        <td class="single-price">￥{{item.singlePrice = (item.num*item.price).toFixed(2)}}</td>
                        <td> <a href="#">移入收藏</a><br><a href="#" class="del" @click="onDelete(item.id)">删除</a></td>
                    </tr>
                </table>
                <h2>商品总价:<span class="total-price">￥{{totalPrice}}</span></h2>
            </div>`
}